import {ChangeDetectorRef, Component, ComponentFactoryResolver, OnInit, ViewChild} from '@angular/core';
import {AdComponent, DynamicComponent} from "../../../core/services/types";
import {PageHeaderType} from "../../../shared/components/page-header/page-header.component";
import {AdDirective} from "../../../shared/directives/ad.directive";
import {NzMenuModeType} from "ng-zorro-antd/menu/menu.types";
import {WindowService} from "../../../core/services/common/window.service";
import {BreakpointObserver} from "@angular/cdk/layout";
import {AdminKey} from "../../../config/constant";
import {AdminService} from "../../../core/services/store/admin.service";
import {BasicInformationComponent} from "./basic-information/basic-information.component";
import {SpecialChemicalsComponent} from "./special-chemicals/special-chemicals.component";
import {MajorHazardSourcesComponent} from "./major-hazard-sources/major-hazard-sources.component";
import {OtherInformationComponent} from "./other-information/other-information.component";
import {IdentifyIdService} from "../../../core/services/store/biz-store-service/identify-id/identify-id.service";
import {PhysicalChemicalComponent} from "./physical-chemical/physical-chemical.component";

interface TabInterface {
  key: string;
  component: DynamicComponent;
}

@Component({
  selector: 'app-add-edit-identify',
  templateUrl: './add-edit-identify.component.html',
  styleUrls: ['./add-edit-identify.component.less']
})
export class AddEditIdentifyComponent implements OnInit {
  pageHeaderInfo: Partial<PageHeaderType> = {
    title: '化学品分辨类别',
    breadcrumb: ['首页', '化学品分辨']
  };
  identifyId = -1;
  @ViewChild(AdDirective, {static: true}) adHost!: AdDirective;
  tabModel: NzMenuModeType = 'inline';
  settingComponent: TabInterface[] = [
    {key: 'basic-information', component: new DynamicComponent(BasicInformationComponent, {label: ''}),},
    {key: 'physical-chemical', component: new DynamicComponent(PhysicalChemicalComponent, {label: ''}),},
    {key: 'special-chemicals', component: new DynamicComponent(SpecialChemicalsComponent, {label: ''}),},
    {key: 'major-hazard-sources', component: new DynamicComponent(MajorHazardSourcesComponent, {label: '',}),},
    {key: 'other-information', component: new DynamicComponent(OtherInformationComponent, {label: ''}),},
  ];
  menus: Array<{ key: string; title: string; selected?: boolean, disabled?: boolean }> = [
    {
      key: 'basic-information',
      title: '基本信息 | (必填项)',
      selected: true,

    },
    {
      key: 'physical-chemical',
      title: '理化特性',
      selected: false,

    },
    {
      key: 'special-chemicals',
      title: '特殊化学品辨识',
      selected: false,

    },
    {
      selected: false,
      key: 'major-hazard-sources',
      title: '重大危险源辨识',

    },
    {
      selected: false,
      key: 'other-information',
      title: '其他信息',

    }
  ];
  currentTitle: string = this.menus[0].title;

  constructor(private componentFactoryResolver: ComponentFactoryResolver,
              private identifyIdService: IdentifyIdService, private windowSrv: WindowService,
              private breakpointObserver: BreakpointObserver, private cdr: ChangeDetectorRef, public AdminService: AdminService) {
  }

  to(item: { key: string; title: string; selected?: boolean }, isFirstLoad: boolean = false): void {
    if (!isFirstLoad && this.identifyId === -1) {
      return;
    }
    const selMenu = this.settingComponent.find(({key}) => {
      return key === item.key;
    });
    this.currentTitle = selMenu!.component.data.label;
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(selMenu!.component.component);
    const viewContainerRef = this.adHost.viewContainerRef;

    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent<AdComponent>(componentFactory);
    componentRef.instance.data = selMenu!.component.data;
  }

  obBreakPoint(): void {
    this.breakpointObserver.observe(['(max-width: 767px)']).subscribe(result => {
      this.tabModel = result.matches ? 'horizontal' : 'inline';
      this.cdr.markForCheck();
    });
  }

  ngOnInit(): void {
    this.identifyIdService.getIdentifyIdStore().subscribe(res => {
      this.identifyId = res;
    });
    const permissions = this.windowSrv.getSessionStorage(AdminKey);
    if (permissions === '1') {
      this.AdminService.isAdmin = true;
    }
    this.to(this.menus[0], true);
    this.obBreakPoint();
  }


}
